.home{
  display: flex;
  justify-content: space-between;
  margin: .5rem;
  height: auto;
}
.home .features{
  width: 67.4rem;
}
.home .message{
  margin-left: 1rem ;
  width: 23.444rem;
}
.companyInfo{
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  height: auto;
}
.companyInfo .info{
  width: 25rem;
  height: 7rem;
  border-radius: .5rem;
  background-color: #fff;
}
.companyInfo .info .imgorInfo{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.companyInfo .info .imgorInfo div{
  text-align: left;
  margin: .5rem;
}
.companyInfo .info .imgorInfo span{
  color: #f98a10;
}
.companyInfo .info .imgorInfo .name{
  color: #343434;
  font-size: 1rem;
  font-weight: 600;
}
.companyInfo .info .imgorInfo .description{
  font-size: .7rem;
  color: #555;
}
.companyInfo .info .imgorInfo img{
  width: 3rem;
  height: 3rem;
  margin: .5rem;
}
.companyInfo .info .thisInfo{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: .78rem;
  background-color: rgb(249, 249, 249);
  padding: 1rem;
}
.companyInfo .info .thisInfo div{
  font-size: .4rem;
  color: #555;
  margin-right: 2rem;
}
.companyInfo .info .thisInfo div span{
  color: #343434;
}
.companyInfo .swiper{
  width: 41rem;
  height: 7rem;
  border-radius: .5rem;
  background-color: #fff;
}
.companyInfo .swiper img{
  width: 100%;
  height: 100%;
}


.programList{
  width: 67.4rem;
  height: auto;
  margin-top: .5rem;
  background-color: #fff;
}
.programList .name{
  font-size: .8rem;
  color: #343434;
  padding: .8rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.programList .name span{
  margin-left: 1rem;
  font-size: .7rem;
  color: #9f9f9f;
}
.programList .button{
  padding: .4rem .8rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.programList .button button{
  margin-right: 1rem;
  border-width: 0;
  padding: .4rem .8rem;
  background-color: #f98a10;
  border-radius: .2rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.programList .list{
  text-align: left;
  margin-left: 1rem;
  height: auto;
}
.programList .list .item{
  width: 20rem;
  height: 20rem;
  padding: .5rem;
  display: inline-block;
}
.programList .list .item .status{
  width: 100%;
  height: 1.8rem;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .5rem;
}
.programList .list .item .status .sta{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.programList .list .item .status .sta span{
  font-size: 5rem;
  color: #f98a10;
  border-radius: 5rem;
}
.programList .list .item .status .version span{
  color: #2d8cf0;
  margin-right: .5rem;
}
.programList .list .item .QRCode{
  height: 13rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.programList .list .item .QRCode img{
  width: 100%;
  height: 100%;
}
.programList .list .item .QRCode .QRCodeImg{
  width: 7rem;
  height: 7rem;
  border-radius: 7rem;
  position: absolute;
  z-index: 5;
}
.programList .programInfo{
  height: 3rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.programList .programIcon{
  width: 2rem;
  height: 2rem;
  margin: .5rem;
  border: 1px solid #f98a10;
  border-radius: .1rem;
  color: #f98a10;
  background-color: #fff3ee;
  display: flex;
  align-items: center;
  justify-content: center;
}
.programList .programName{
  font-size: .7rem;
  color: #343434;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.programList .time{
  font-size: .7rem;
  color: #9f9f9f;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.programList .operating{
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: space-around;
  font-size: .7rem;
  color: #9f9f9f;
}
.programList .operating div {
  width: 5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.programList .operating div icon {
  margin-right: .2rem;
}
.programList .operating div:hover{
  background-color: #f98a10;
  color: #fff;
}


.special{
  width: 67.4rem;
  height: auto;
  margin-top: .5rem;
  background-color: #fff;
}
.special .name {
  font-size: .8rem;
  color: #343434;
  padding: .8rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.special .con{
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 5.5rem;
}
.special .item{
  width: 16.2rem;
  height: 4.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  background-color: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
}
.special .item img{
  width: 3.1rem;
  height: 3.6rem;
  margin-right: .5rem;
}


.guide{
  width: 67.4rem;
  height: auto;
  margin-top: .5rem;
  background-color: #fff;
}
.guide .name{
  font-size: .8rem;
  color: #343434;
  padding: .8rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.guide .guideInfo{
  margin-left: 1rem;
  font-size: .7rem;
}
.guide .community{
  color: #2d8cf0;
}
.guide .con{
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 5.5rem;
}
.guide .item{
  width: 20.8rem;
  height: 4.5rem;
  background-color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
}
.guide .item icon{
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 3.6rem;
  color: #fff;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: .5rem;
}
.guide .novice{
  background-color: #f0ffef;
  color: #59b752;
}
.guide .novice icon{
  background-color: #59b752;
}
.guide .Application{
  background-color: #fff9ef;
  color: #f98a10;
}
.guide .Application icon{
  background-color: #f98a10;
}
.guide .release{
  background-color: #f1f8ff;
  color: #6bc2ff;
}
.guide .release icon{
  background-color: #6bc2ff;
}
.message .messageSys{
  padding: .4rem;
  width: 23rem;
  background-color: #fff;
}
.message .title{
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: .8rem;
  color: #343434;
}
.message .messageSys icon{
  font-size: .7rem;
  color: #9f9f9f;
}
.message .more{
  font-size: .7rem;
  color: #9f9f9f;
}
.message .messageSys .con{
  height: auto;
}
.message .messageSys .item{
  height: 1.75rem;
  border-bottom: 1px solid #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #fd1e1f;
  font-size: .5rem;
}
.message .messageCon{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  
}
.message .messageCon icon{
  font-size: .5rem;
}
.message .messageCon div{
  width: 10rem;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.message .messageCon img{
  width: 1.5rem;
  height: .5rem;
}
.message .feedback{
  padding: .4rem;
  width: 23rem;
  background-color: #fff;
  margin-top: .5rem;
}
.message .feedback .item{
  margin: .5rem 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.message .feedback .item:hover{
  background-color: #ebf7ff;
}
.message .feedback .item icon{
  width: 3rem;
  height: 3rem;
  margin-right: .5rem;
  background-color: #efdfd9;
  color: #ff8d55;
  font-size: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.message .feedback .item .con{
  width: 20rem;
}
.message .feedback .item .name{
  width: 100%;
  font-size: .9rem;
  color: #343434;
  text-align: center;
  margin-bottom: .3rem;
  display: flex;
  justify-content: flex-start;
}
.message .feedback .item .description{
  display: flex;
  justify-content: flex-start;
  width: 100%;
  text-align: center;
  font-size: .5rem;
  color: #9f9f9f;
}
.message .feedback .item .description span{
  color: #2d8cf0;
}
.message .QRCode{
  width: 23rem;
  padding: .4rem;
  margin-top: .5rem;
  background-color: #ff7967;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.message .QRCodeimg{
  width: 7.5rem;
  height: 7.5rem;
}